<template>
  <div>
    <el-button type="primary" @click="add">新增家属</el-button>
    <!-- 家属信息 -->
    <el-table :data="ruleForm!.family" style="margin-bottom: 10px">
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="idCard" label="身份证号码" />
      <el-table-column prop="mobile" label="联系电话" />
      <el-table-column prop="address" label="联系地址" />
      <el-table-column prop="relation" label="与老人关系" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link @click="update(scope.row, scope.$index)">编辑</el-button>
          <el-button type="primary" link @click="del(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddFamily v-if="dialogVisible" @close="closeHandle" :currentFamliy="currentFamliy"></AddFamily>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import AddFamily from '@/components/market/elderly/add/family/AddFamily.vue'
import { AddParams, familyData } from '@/api/market/elderly/type';

//添加dialogf
const dialogVisible = ref(false);


//添加
const add = () => {
  currentFamliy = reactive<familyData>({
    id: 0,
    name: "",
    mobile: "",
    idCard: "",
    relation: "",
    gender: 1,
    address: ""
  })
  //清空下标
  currentIndex.value = "";
  dialogVisible.value = true;
}
const ruleForm = inject<AddParams>('ruleForm');



let currentFamliy = reactive<familyData>({
  id: 0,
  name: "",
  mobile: "",
  idCard: "",
  relation: "",
  gender: 1,
  address: ""
})

let currentIndex = ref<string>("");
//修改
const update = (data: familyData, index: string) => {
  dialogVisible.value = true;
  currentFamliy = data;
  currentIndex.value = index;
  // console.log("currentIndex",currentIndex.value);
}

//删除
const del = (index: number) => {
  ElMessageBox.confirm("是否确认删除", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      ruleForm?.family.splice(index, 1);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消 canceled",
      });
    })

}

//关闭添加dialog
const closeHandle = (data: familyData) => {
  dialogVisible.value = false;
  if (data) {
    if (currentIndex.value || currentIndex.value=="0") {
      //修改
      ruleForm?.family.splice(Number(currentIndex.value), 1, data);
    } else {
      //添加
      ruleForm?.family.push(data);
    }
  }
}


</script>

<style scoped></style>